<!-- 我的教练 -->
<template>
	<view>
		<!-- 背景 -->
		<view class="background"></view>
		<!-- 教练信息卡 -->
		<view class="coachMsg">
			<image :src="coachMsg.pic" mode="aspectFill" class="pic"></image>
			<view class="name">{{coachMsg.name}}</view>
			<view class="school">{{coachMsg.school}}</view>
			<view class="score">
				<uni-rate :value="coachMsg.score" :readonly="true" size="40rpx"></uni-rate>
				<text style="font-size: 20rpx;margin-left: 14rpx;color: #666666;">{{coachMsg.score.toFixed(1)}}</text>
			</view>
			<view class="labels">
				<view class="son" v-for="(k,i) in coachMsg.labels" :class="labelStyle[i]">
					{{k}}
				</view>
			</view>
			<view class="change" @click="$win.show('changeCoach/changeCoach')" v-if="!coachEvaluation.changing">
				<image src="/static/images/icon/my/change.png" mode="aspectFit"></image>
				<text>更换教练</text>
			</view>
			<view class="change" @click="$win.show('changeCoach/changeCoach')" v-else>
				<image src="/static/images/icon/my/changing.png" mode="aspectFit"></image>
				<text style="color: #4988F5;">正在审核</text>
			</view>
		</view>
		<!-- 教练评价 -->
		<view class="coachEvaluation">
			<view class="title">教练评价</view>
			<view class="score">
				<uni-rate v-model="coachEvaluation.score" :size="46" allowHalf="true" :readonly="coachEvaluation.scoreReadonly">
				</uni-rate>
				<text
					style="color: #666666;font-size: 22rpx;margin-left:30rpx;">{{coachEvaluation.score.toFixed(1)}}</text>
			</view>
			<view class="chooseLabels">
				<view class="son" v-for="(k,i) in coachEvaluation.labels" :style="{'color':k.isAct?'#29C563':'#666666',
				'borderColor':k.isAct?'#29C563':'#c7c7c7'}" @click="act(k)" v-if="k.isShow">
					{{k.text}}
					<view class="icon" v-if="k.isAct">
						<icon type="success" size="28rpx" />
					</view>
				</view>
			</view>
			<button class="subBtn" @click="submit" :disabled="coachEvaluation.isBan" v-html="coachEvaluation.isBan?'已评价':'确定'"
				:style="{'background':coachEvaluation.isBan?'#e3e3e3':'','color':coachEvaluation.isBan?'#666666':''}">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelStyle: ['st', 'nd', 'rd'],
				//教练信息卡
				coachMsg: {
					name: '卢教练',
					pic: '/static/user/coach/coachPic.jpg',
					school: '梅州驾校',
					score: 4.6,
					labels: ['脾气好', '不抽烟', '不骂人'],
				},
				//评价
				coachEvaluation: {
					banClick: false, // 提交后注销点击事件，布尔
					changing: false, //更换教练，布尔
					scoreReadonly: false, //评分只读，布尔
					isBan: false, //禁用按钮和改变按钮样式，布尔
					score: 5,//评分，数字
					labels: [{
							text: '脾气好',//标签文本，字符
							isAct: false, //选中，布尔
							isShow: true, //显示，布尔
						},
						{
							text: '不抽烟',
							isAct: false,
							isShow: true, //显示
						},
						{
							text: '不骂人',
							isAct: false,
							isShow: true, //显示
						},
						{
							text: '标签',
							isAct: false,
							isShow: true, //显示
						},
						{
							text: '标签二44',
							isAct: false,
							isShow: true, //显示
						},
						{
							text: '标签三1234',
							isAct: false,
							isShow: true, //显示
						}
					],
				}
			}
		},
		methods: {
			act(k) {
				if (!this.coachEvaluation.banClick)
					k.isAct = !k.isAct
			},
			submit() { //提交
				var num = 0
				for (var i = 0; i < this.coachEvaluation.labels.length; i++) {
					if (this.coachEvaluation.labels[i].isAct)
						num++
				}
				if (num == 0) {
					uni.showModal({
						title: '请至少选择一个标签',
						showCancel: false
					})
				} else {
					this.submited()
				}
			},
			submited() { //提交后改变样式
				this.coachEvaluation.banClick = true //注销标签点击事件
				this.coachEvaluation.scoreReadonly = true
				this.coachEvaluation.isBan = true
				for (var a = 0; a < this.coachEvaluation.labels.length; a++) {
					this.coachEvaluation.labels[a].isShow = this.coachEvaluation.labels[a].isAct
				}
			},
		}
	}
</script>

<style>
	page {
		position: relative;
		background-color: #f2f3f5;
	}

	.background {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 255rpx;
		background: #29c563;
		z-index: -1;
	}

	/* 教练信息卡start */
	.coachMsg {
		position: absolute;
		margin: 0 24rpx;
		top: 100rpx;
		width: 702rpx;
		height: 260rpx;
		background: #ffffff;
		border-radius: 16rpx;
	}

	.coachMsg .pic {
		position: absolute;
		top: -50rpx;
		left: 24rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 8rpx solid #ffffff;
	}

	.coachMsg .name {
		position: absolute;
		top: 70rpx;
		left: 39rpx;
		width: 96rpx;
		height: 32rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		font-weight: Medium;
		text-align: left;
		color: #333333;
		line-height: 32rpx;
	}

	.coachMsg .school {
		position: absolute;
		top: 78rpx;
		left: 171rpx;
		width: 96rpx;
		height: 24rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #666666;
		line-height: 24rpx;
	}

	.coachMsg .score {
		display: flex;
		align-items: center;
		position: absolute;
		left: 39rpx;
		top: 133rpx;
	}

	.coachMsg .labels {
		display: flex;
		position: absolute;
		bottom: 38rpx;
		left: 39rpx;
		height: 36rpx;
	}

	.coachMsg .labels .son {
		margin-right: 16rpx;
		height: 36rpx;
		border-radius: 2rpx;
		padding: 0 19rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		line-height: 36rpx;
	}

	.coachMsg .labels .st {
		color: #f17516;
		background: #ffecd9;
	}

	.coachMsg .labels .nd {
		color: #29c563;
		background: #dff9dc;
	}

	.coachMsg .labels .rd {
		color: #4988f5;
		background: #c5daff;
	}

	.coachMsg .change {
		display: flex;
		align-items: center;
		position: absolute;
		top: 34rpx;
		right: 30rpx;
	}

	.coachMsg .change image {
		width: 33rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.coachMsg .change text {
		height: 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
		line-height: 28rpx;
	}

	/* 教练信息卡end */

	/* 教练评价start */
	.coachEvaluation {
		position: absolute;
		top: 380rpx;
		width: 702rpx;
		height: 796rpx;
		margin: 0 24rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 0rpx;
	}

	.coachEvaluation .title {
		position: absolute;
		top: 40rpx;
		left: 30rpx;
		height: 32rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;
		line-height: 32rpx;
	}

	.coachEvaluation .score {
		position: absolute;
		top: 123rpx;
		left: 30rpx;
		display: flex;
		align-items: center;
	}

	.coachEvaluation .chooseLabels {
		position: absolute;
		top: 244rpx;
		left: 30rpx;
		display: flex;
		flex-direction: row;
		max-height: 240rpx;
		max-width: 642rpx;
		flex-wrap: wrap;
	}

	.coachEvaluation .chooseLabels .son {
		position: relative;
		height: 60rpx;
		margin: 0 30rpx 30rpx 0;
		padding: 0 32rpx;
		background: #ffffff;
		box-sizing: border-box;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		line-height: 60rpx;
		color: #666666;
		border: 1rpx solid #c7c7c7;
	}

	.coachEvaluation .chooseLabels .son .act {
		color: #29c563;
		border-color: #29c563;
	}

	.coachEvaluation .chooseLabels .son .icon {
		position: absolute;
		top: -19rpx;
		right: -19rpx;
		display: flex;
		background-color: #fff;
		width: 32rpx;
		height: 32rpx;
	}

	.coachEvaluation .subBtn {
		position: absolute;
		left: 61rpx;
		bottom: 60rpx;
		width: 580rpx;
		height: 90rpx;
		background: linear-gradient(134deg, #54d685, #29c563 99%);
		border-radius: 45rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		line-height: 90rpx;
	}

	/* 教练评价end */
</style>
